<template>
    <div v-if="detailsVisible==true">
        <el-row >
            <el-col :span="spandata" v-for="(person, indexperson)  in banzpersons" :key='indexperson' style="display: flex;">
                <div style="width: 56.5%;height: 240px;" class="showimg">
                    <img :src="person.img" style="width: 100%;height: 100%;border: 1px solid #6a6d73;"> 
                    <div class="demo-upload-list-cover" ><Icon type="ios-eye-outline"  title="预览" @click.native="handleView(person.img)" style="margin: 45%;font-size: 30px;"></Icon></div>
                </div>
                <el-table :data="person.data"  border  :show-header="false"  max-height="height: 241px;">
                    <el-table-column prop="name" width="80" align="center"></el-table-column>
                    <el-table-column prop="value" width="95" align="center"></el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <Modal title="预览图片" v-model="visible" style="z-index:2999">
            <img :src="imgsrc" v-if="visible" style="width: 100%">
        </Modal>
    </div>
</template>
<script>
    import {mapActions} from 'vuex';
    export default {
        data: () => ({
            spandata:6,
            detailsVisible: false, //当前dialog是否显示
            banzpersons:[], //显示到table的人员  外部传入
            visible:false,
            imgsrc:'',
        }),
        watch: {
            "detailsVisible": {
                handler(n) {
                    if(this.detailsVisible==true){
                        this.$Common.Config.this=this;
                        this.getBanzis();
                    }
                },
                deep: true
            }, 
        },
        components: {
        },
        mounted() {
            if(this.GetUser()==false){this.$router.push("/");}
        },
        methods: {
            ...mapActions(['GetUser']),
            handleView(imgsrc) {
                this.imgsrc = imgsrc;
                this.visible = true;
            },
            getBanzis(){ // 获取支部的班子信息
                let _this=this;
                this.$Loading.start();
                return new Promise(function (resolveroot, rejectroot) {
                    let postdata={
                        type:"getbanzi",
                        split:JSON.stringify(_this.$store.state.Dw_DzbID)
                    }
                    _this.$Common.AjaxPost(postdata,true)
                    .then(function(e){
                         _this.$Loading.finish();
                        for (let index2 = 0; index2 < e.Persons.length; index2++) {
                            let element2 = e.Persons[index2];
                            let onePerson={};
                            let dataT=new Date().getTime();
                            onePerson.img=element2.img+"?"+dataT;
                            onePerson.data=[];
                            onePerson.data.push({
                                img: element2.img,
                                name: '姓名',
                                value: element2.truename
                            });
                            onePerson.data.push({
                                name: '性别',
                                value: element2.sex

                            });
                            onePerson.data.push({
                                name: '出生年月',
                                value: element2.birthday

                            });
                            onePerson.data.push({
                                name: '入党时间',
                                value: element2.datain
                            });
                            onePerson.data.push({
                                name: '党内职务',
                                value: element2.zhiwu

                            });
                            _this.banzpersons.push(onePerson);
                        }
                        resolveroot(true);
                    },function(){
                        _this.$Loading.finish();
                    });
                });
            },
        }
    }
</script>
<style>
</style>